<template>
  <div :style="{ paddingTop: paddingTop }">
    <div class="ie-container--fluid">
      <el-image
        src="/static/image/page_solution.jpg"
        style="width: 100%; height: 420px;"
        fit="cover"
      />
      <div class="ie-container" style="margin-top: -320px;">
        <div class="title" style="margin-bottom: 128px;">
          <h2>解决方案</h2>
          <p>客户的支持让我们不断前进</p>
        </div>
        <a-row class="head-box">
          <a-col
            v-for="(item, $index) in solutions"
            :key="$index"
            :span="12"
          >
            <div class="block-h">
              <img :src="images[`s${$index + 1}`]" alt="">
              <div class="box">
                <h3>{{ item.t }}</h3>
                <p v-html="item.e"></p>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <div
      class="ie-container--fluid"
      v-for="(item, $index) in solutions"
      :key="$index"
    >
      <section :class="{ odd: $index % 2 }">
        <div class="ie-container">
          <div class="title">
            <h3>{{ item.t }}</h3>
          </div>
          <a-row :gutter="48">
            <a-col
              v-for="(subItem, $subIndex) in item.children"
              :key="$subIndex"
              :md="12"
              :xs="24"
            >
              <div class="block">
                <div class="t">
                  <img :src="images[`s${$index + 1}${$subIndex + 1}`]" alt="">
                  <span>{{ subItem.t }}</span>
                </div>
                <ul>
                  <li v-for="p in subItem.items" :key="p">{{ p }}</li>
                </ul>
              </div>
            </a-col>
          </a-row>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useMq } from 'vue3-mq'

import s1 from '/@/assets/image/s1.png?inline'
import s11 from '/@/assets/image/s1-1.png?inline'
import s12 from '/@/assets/image/s1-2.png?inline'
import s13 from '/@/assets/image/s1-3.png?inline'
import s14 from '/@/assets/image/s1-4.png?inline'
import s2 from '/@/assets/image/s2.png?inline'
import s21 from '/@/assets/image/s2-1.png?inline'
import s22 from '/@/assets/image/s2-2.png?inline'
import s23 from '/@/assets/image/s2-3.png?inline'
import s24 from '/@/assets/image/s2-4.png?inline'

const mq = useMq()
const paddingTop = computed(() => {
  return mq.mdMinus ? '80px' : '100px'
})

const solutions = [
  {
    t: '企业解决方案',
    e: 'Enterprise<br>Solution',
    children: [
      {
        t: '品牌设计',
        items: [
          'UI 情感化设计',
          '增强现实技术 AR',
          '视觉识别系统 VI',
          '规范制定  Guideline'
        ]
      },
      {
        t: '网站建设',
        items: [
          '自研框架，稳定性与安全性保障',
          '组件化开发，H5 跨平台开发',
          '网站安全服务',
          '网络无障碍辅助功能'
        ]
      },
      {
        t: '小程序/APP/鸿蒙/快应用开发',
        items: [
          '提供 Web 端、桌面工具、APP、小程序、快应用、公众号等多平台开发支持',
          '根据行业业务定制功能与流程，提供敏捷高效、安全可靠的移动化解决方案',
          '在用户已有信息化投资上，采用轻量化方案进行改造，快速实现移动化'
        ]
      },
      {
        t: '定制化开发',
        items: [
          '根据企业现有的工作流程编制开发，逻辑流程清晰，易用性强',
          '仅开发企业所需的功能模块，缩短开发周期，节省开发费用',
          '根据企业发展需求定制，满足企业的升级迭代要求，助力企业变革和发展'
        ]
      }
    ]
  },
  {
    t: '政务解决方案',
    e: 'Government<br>Solution',
    children: [
      {
        t: '数字化办公',
        items: [
          '基于云计算技术搭建敏捷的基础设施',
          '使用智能终端优化移动化办公流程、集成高效的沟通协作工具',
          '利用AI技术构筑虚拟助理、语音控制以及大数据辅助决策'
        ]
      },
      {
        t: '移动政务',
        items: [
          '符合国家安全标准，全流程数据传输加密，保障政务移动办公的安全性',
          '全面感知数据分析、多维度数据可视化展示，对管理决策提供参考依据',
          '提高政府办公效率效能、灵活构建改进办公方式、促进政务办公协作合力'
        ]
      },
      {
        t: '办事大厅',
        items: [
          '基于AI、大数据技术，高效整合相关资源，使公众需求与服务工作有效衔接',
          '打破各部门各系统间的壁垒，有效整合各领域流程，实现流程贯通和数据整合',
          '提供更加便捷、高效、舒适的服务体验和更加精细化的管理手段'
        ]
      },
      {
        t: '等级保护',
        items: [
          '依据保护互联网数据的标准方法体系，全面保护数据信息安全，提高企业信息系统的安全防护能力'
        ]
      }
    ]
  }
]

const images = {
  s1, s11, s12, s13, s14, s2, s21, s22, s23, s24
}
</script>

<style lang="less" scoped>
.title {
  color: #FFFFFF;
  line-height: 1.5;
  text-align: center;

  h2 {
    font-size: 32px;
    margin-bottom: 18px;
  }

  p {
    font-size: 16px;
  }
}

.head-box {
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.08);

  & > .arco-col:first-child .block-h {
    border-radius: 8px 0 0 8px;
    color: #FFF;
    background-color: #045BDB;
  }

  & > .arco-col:last-child .block-h {
    border-radius: 0 8px 8px 0;
  }
}

.block-h {
  text-align: center;
  height: 180px;
  padding-top: 24px;
  background-color: #FFF;
  position: relative;

  &:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }

  .box {
    display: inline-block;
    vertical-align: middle;
  }

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
  }

  h3 {
    font-size: 26px;
    margin-bottom: 18px;
  }

  p {
    opacity: 0.6;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
  }
}

.block {
  background-color: #FFF;
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 48px;

  .t {
    font-size: 20px;
    font-weight: bold;
    color: #272E3B;
    line-height: 32px;
    margin-bottom: 12px;
  }

  img {
    width: 24px;
    height: 24px;
    margin: 4px 16px 4px 0;
    display: inline-block;
  }

  @lineHeight: 28px;

   ul {
    list-style: none;
    min-height: @lineHeight * 3;
  }

  li {
    font-size: 14px;
    color: #444;
    line-height: @lineHeight;
    min-width: 50%;
    display: inline-block;

    &:before {
      content: '';
      width: 9px;
      min-width: 9px;
      height: 14px;
      display: inline-block;
      border-right: 2px solid #3662E4;
      border-bottom: 2px solid #3662E4;
      transform: rotate(43deg);
      margin: 2px 16px 0 8px;
    }
  }
}

section {
  padding: 64px 0;

  &.odd {
    background-color: #FAFBFC;

    .arco-col:last-child li:before {
      content: none;
    }
  }

  .title {
    font-size: 28px;
    color: #272E3B;
    margin-bottom: 60px;
  }
}
</style>